---
import '$styles/app.css'
import '$styles/code.css'
import '$styles/markdown.css'

export interface Props {
  title: string
}

const title = Astro.props.title
---

<!doctype html>
<html
  lang="en"
  class="bg-[#0A0F19]"
>
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width"
    />
    <title>{title}</title>
    <link
      rel="preconnect"
      href="https://fonts.googleapis.com"
    />
    <link
      rel="preconnect"
      href="https://fonts.gstatic.com"
      crossorigin
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900"
      rel="stylesheet"
    />

    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="/icons/apple-touch-icon.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="/icons/favicon-32x32.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="16x16"
      href="/icons/favicon-16x16.png"
    />
    <link
      rel="manifest"
      href="/icons/site.webmanifest"
    />
    <link
      rel="mask-icon"
      href="/icons/safari-pinned-tab.svg"
      color="#fe3d00"
    />
    <link
      rel="shortcut icon"
      href="/icons/favicon.ico"
    />
    <meta
      name="msapplication-TileColor"
      content="#2b5797"
    />
    <meta
      name="msapplication-config"
      content="/icons/browserconfig.xml"
    />
    <meta
      name="theme-color"
      content="#0a0F19"
    />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1"
    />

    <meta
      property="og:title"
      content="Threlte"
    />
    <meta
      property="og:type"
      content="website"
    />
    <meta
      name="description"
      content="Threlte - Rapidly build interactive 3D apps for the web"
    />
    <meta
      property="og:description"
      content="Threlte - Rapidly build interactive 3D apps for the web"
    />
    <meta
      property="og:image"
      content="https://threlte.xyz/threlte-social-preview-v2.jpg"
    />
    <meta
      property="og:image:secure_url"
      content="https://threlte.xyz/threlte-social-preview-v2.jpg"
    />
    <meta
      property="og:image:width"
      content="1200"
    />
    <meta
      property="og:image:height"
      content="630"
    />
    <meta
      property="og:image:alt"
      content="Threlte - Rapidly build interactive 3D apps for the web"
    />
    <meta
      name="twitter:card"
      content="summary_large_image"
    />
    <meta
      name="twitter:title"
      content="Threlte - Rapidly build interactive 3D apps for the web"
    />
    <meta
      name="twitter:description"
      content="Threlte is a 3D framework for Svelte that lets you rapidly build interactive 3D apps for the web"
    />
    <meta
      property="og:site_name"
      content="Threlte"
    />
  </head>
  <body
    transition:animate="initial"
    class="relative bg-[#0A0F19] font-sans text-white"
  >
    <slot />
  </body>
</html>
